<template>
	<image src="/static/mine/login_title.png" class="title" mode="heightFix" />
	<view class="tips">未注册手机验证后自动登录</view>
	<button class="btn" v-if="tongyi" open-type="getPhoneNumber" @getphonenumber="getphonenumber">手机号码一键登录</button>
	<button class="btn" v-else @click="this.$refs.popup.open()"
		style="background-color: #CAD5E2;color: #ffffff;">手机号码一键登录</button>
	<view class="xieyi_box">
		<image @click="tongyi=!tongyi" src="/static/icon/gouxuan.png" v-if="tongyi" />
		<view @click="tongyi=!tongyi" v-else />
		我已阅读并同意<navigator
			:url="'/pages/web/web?src='+encodeURIComponent('https://hsstatic.meijingnet.cn/user_agreement.html')">《用户协议》
		</navigator>以及<navigator
			:url="'/pages/web/web?src='+encodeURIComponent('https://hsstatic.meijingnet.cn/privacy_policy.html')">
			《隐私保护协议》</navigator>
	</view>
	<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff" safe-area>
		<view
			style="display: flex;align-items: center;justify-content: space-between;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<text style="font-size: 32rpx;font-weight: bold;justify-self: sta;">用户协议与隐私协议</text>
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="this.$refs.popup.close()">
			</image>
		</view>
		<view class="xieyi_box"
			style="font-size: 30rpx;margin: 100rpx 36rpx 140rpx 36rpx;justify-content: flex-start;width: 678rpx;height: auto;">
			登录前请阅读并同意<navigator
				:url="'/pages/web/web?src='+encodeURIComponent('https://hsstatic.meijingnet.cn/user_agreement.html')">
				《用户协议》</navigator>以及<navigator
				:url="'/pages/web/web?src='+encodeURIComponent('https://hsstatic.meijingnet.cn/privacy_policy.html')">
				《隐私保护》</navigator>
		</view>
		<view class="from_btn_box">
			<view class="reset" @click="this.$refs.popup.close()">取消</view>
			<button class="submit" open-type="getPhoneNumber" @getphonenumber="getphonenumber">确认并登录</button>
		</view>
	</uni-popup>
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				tongyi: false,
			}
		},
		methods: {
			async getphonenumber(e) {
				let detail = e.detail;
				console.log(detail)
				// #ifdef MP-ALIPAY
				// encryptedData sign
				// #endif
				if (detail.encryptedData) {
					this.$refs.popup.close();
					this.tongyi = true;

					let e;
					// #ifdef MP-WEIXIN
					e = await api.wx_login({
						jsCode: detail.code,
						appId: 'wxbc8c2feaa45add1d'
					})
					// #endif
					// #ifdef MP-ALIPAY
					e = await api.ali_login({
						encryptedData: detail.encryptedData,
						appId: 'wxbc8c2feaa45add1d'
					})
					// #endif
					if (e?.result?.token) {
						getApp().globalData.token = e.result.token;
						uni.setStorageSync('token', e.result.token);
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 1500
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.title {
		height: 50rpx;
		width: auto;
		margin: 100rpx 0 20rpx 80rpx;
	}

	.tips {
		font-size: 30rpx;
		color: #62748E;
		margin: 0 0 150rpx 80rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.btn {
		background-color: #FFDF20;
		width: 590rpx;
		height: 100rpx;
		border-radius: 30rpx;
		font-size: 34rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 0 0 40rpx 80rpx;
	}

	button::after {
		border: none;
	}

	.xieyi_box {
		width: 100%;
		height: 32rpx;
		font-size: 26rpx;
		color: #62748E;
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xieyi_box view {
		height: 32rpx;
		width: 32rpx;
		box-sizing: border-box;
		border: 1px solid #CAD5E2;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.xieyi_box image {
		height: 32rpx;
		width: 32rpx;
		margin-right: 20rpx;
	}

	.xieyi_box navigator {
		color: #020618;
	}
</style>